<template>
  <el-popover
    placement="bottom"
    :width="400"
    trigger="click"
    popper-class="axiom-icon-picker-popper"
  >
    <template #reference>
      <el-input
        :model-value="modelValue"
        placeholder="点击选择图标"
        readonly
        class="icon-picker-input"
      >
        <template #prepend>
          <AxiomIcon v-if="modelValue" :name="modelValue" />
        </template>
      </el-input>
    </template>
    <div class="icon-list-wrapper">
      <div class="icon-list">
        <div
          v-for="icon in iconList"
          :key="icon"
          class="icon-item"
          @click="handleSelect(icon)"
        >
          <AxiomIcon :name="icon" />
          <span class="icon-name">{{ icon }}</span>
        </div>
      </div>
    </div>
  </el-popover>
</template>

<script setup>
import { ref } from 'vue';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { ElPopover, ElInput } from 'element-plus';
import AxiomIcon from './AxiomIcon.vue';

defineProps({
  modelValue: String,
});

const emit = defineEmits(['update:modelValue']);

const iconList = ref(Object.keys(ElementPlusIconsVue));

const handleSelect = (iconName) => {
  emit('update:modelValue', iconName);
};
</script>

<style lang="scss">
.axiom-icon-picker-popper {
  height: 300px;
  .icon-list-wrapper {
    height: 100%;
    overflow-y: auto;
  }
  .icon-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
  }
  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--axiom-border-color-light);
    border-radius: 4px;
    padding: 8px;
    transition: all 0.2s;

    &:hover {
      background-color: var(--axiom-fill-color-light);
      color: var(--axiom-primary-color);
      border-color: var(--axiom-primary-color);
    }

    .ax-icon {
      font-size: 24px;
    }

    .icon-name {
      margin-top: 8px;
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }
  }
}

.icon-picker-input .el-input-group__prepend {
  padding: 0 10px;
}
</style> 